<!--
 * @Author: wangshuguang
 * @Date: 2022-02-21 20:26:33
 * @LastEditTime: 2022-04-18 11:38:30
 * @LastEditors: wangshuguang
 * @Description: 我的套餐
-->
<template>
  <div class="myFlow">
    <HeaderComp title="我的套餐" />
    <!-- 剩余流量 -->
    <div class="residueFlow card">
      <div class="flexItem">
        <div class="cardLabel">
          <div>流量余额: {{ `${baseFlowInfo.symbolAccFlowBalance == '-' ? '-': ''}${baseFlowInfo.accountFlowBalance}` }}</div>
          <div class="tip" v-if="baseFlowInfo.symbolAccFlowBalance == '-'">已欠费，请充值</div>
        </div>
        <div class="cardBtn" @click="toRecharge">去充值</div>
      </div>
    </div>
    <!-- 当前套餐 -->
    <div class="nowMeal card">
      <div class="flexItem">
        <div class="cardLabel">
          <div>当前套餐: {{ baseFlowInfo.pkgTempName }}</div>
          <div class="tip" v-if="baseFlowInfo.symbolAccFlowBalance == '-'">已停用，请充值</div>
        </div>
        <div class="cardBtn" :class="{ disabled: baseFlowInfo.symbolAccFlowBalance == '-' }" @click="toUpgrade(baseFlowInfo.symbolAccFlowBalance == '-')">购买套餐</div>
      </div>
      <div class="tcBottom" v-show="baseFlowInfo.symbolAccFlowBalance != '-'" >
        <div class="flexItem">
          <span>剩余交互次数：{{baseFlowInfo.packageFlowBalance}}</span>
          <span class="useLabel">已用：{{ baseFlowInfo.packageUsedFlow }}</span>
        </div>
        <!-- 进度条 -->
        <div class="progress">
          <van-progress :percentage="baseFlowInfo.useRate" stroke-width="10" color="#58CC5D"/>
        </div>
        <!-- 截止日期 -->
       <!-- <div>下个月结日：{{ baseFlowInfo.pkgEndTime }}</div> -->
	   <div style="margin-top: 34px;">
		<div>到期日期:{{ baseFlowInfo.pkgEndTime }} <span style="color: #FFB72F;margin-left: 10px;" @click="ViewDetails">查看详情</span> </div>
	   
	   </div>
      </div>
    </div>
    <!-- 列表查询条件 -->
    <div class="listQuery">
      <van-tabs v-model="active" title-active-color="#FFB72F" color="#FFB72F" @click="tabChange">
        <van-tab title="消耗记录" name="flowDetail"></van-tab>
        <van-tab title="流量余额记录" name="flowResidueDetail"></van-tab>
      </van-tabs>
      <div class="query" @click="filterPicker = true">
        {{filterObj.text}}
        <img src="../../assets/img/flow/downArrow.png" alt="">
      </div>
    </div>
    <!-- 列表 -->
    <van-list 
      class="dataList"
      v-model="loading"
      offset="100"
      :finished="finished"
      finished-text="没有更多了"
      @load="getListData"
    >
      <div v-for="(item, index) of dataList" :key="index" class="dataItem" @click="handleMenu(item)">
        <div class="left">
          <div class="title">{{ item.name }}</div>
          <div class="date">{{ item.date }}</div>
        </div>
        <div class="right">{{item.consumeFlow}}</div>
      </div>
    </van-list>

    
    <!-- 选择时间 -->
    <van-popup v-model="filterPicker" round position="bottom">
      <van-picker
        title="选择条件"
        show-toolbar
        :columns="filterColumn"
        @cancel="filterPicker = false"
        @confirm="filterConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { getPackageAndBalance,myPackageFlowList,merchantFlowRecordList,checkMercUpgradeFlowPkg } from "@/api/flow/index";
import { mapGetters } from "vuex";
import { dateFtt } from "@/utils/utils";

export default {
  data(){
    return {
      active: 'flowDetail',
      loading: false,
      finished: false,
      filterObj:{
        value: '',
        text: '全部',
      },
      filterPicker: false,
      filterColumn:[],
      pageObj:{
        pageSize: 10,
        pageNum: 1
      },
      dataList: [],
      baseFlowInfo:{
        useRate: 0,
        residue: -11,
        meal: 199,
		accountFlowBalance:'加载中...',
		pkgTempName:'--',
		packageUsedFlow:'--',
		pkgEndTime:'--',
		packageFlowBalance:'--'
      }
    }
  },
  mounted(){
    console.log('this.flowQueryData',this.flowQueryData)
    this.getBaseData()
    // this.getListData()
    this.initFilter()
	// let _this = this
	// setTimeout(function() {
	// 	console.log('看看基础数据',_this.baseFlowInfo)
	// }, 1000);
  },
  computed:{
    ...mapGetters(['flowQueryData'])
  },
  methods:{
	  //查看详情
	  ViewDetails(){
		 this.$router.push('expireTimeInfo')
	  },
    filterConfirm(item){
      this.filterObj = item
      this.pageObj.pageNum = 1
      this.filterPicker = false
      this.dataList = []
      this.getListData()
    },
    initFilter(){
      this.filterObj = {
        value: '',
        text: '全部类型',
      }
      if(this.active == 'flowDetail'){
        this.filterColumn = [
          { text: '全部类型', value: '' },
          { text: '游客消耗', value: '2' },
          { text: '会员消耗', value: '1' },
          { text: '月结清空', value: '3' },
        ]
      }else{
        this.filterColumn = [
          { text: '全部', value: '' },
          { text: '购买流量余额', value: '1' },
          { text: '套餐自动续费', value: '2' },
          { text: '套餐外标准资费扣费', value: '3' },
		  { text: '购买套餐', value: '4' }
        ]
      }
    },
    tabChange(val){
      // tab 切换事件
      console.log('val',val)
      this.pageObj = {
        pageSize: 10,
        pageNum: 1
      }
      this.dataList = []
      this.loading= false
      this.finished= false
      this.initFilter()
      this.getListData()
    },
    getBaseData(){
      const { merchantId } = this.flowQueryData
      // 获取基础套餐数据
      getPackageAndBalance({merchantId}).then(res => {
        console.log('res',res)
        let _data = res.data.data
		let limit =  _data.restrictFlag == 0 ? parseInt(_data.packageFlowBalance/_data.packageTotBalance*100) : 100
		//console.log('看看是多少',limit)
		let useRate = ''
		if(limit >= 100){
			useRate = 100
		}else{
			useRate = limit
		}
        this.baseFlowInfo = {
          ..._data,
          packageFlowBalance: _data.restrictFlag == 0 ? _data.packageFlowBalance : '不限',
          // useRate: _data.restrictFlag == 0 ? parseInt(_data.packageFlowBalance/_data.packageTotBalance*100) : 100,
		  useRate,
          pkgEndTime: dateFtt('yyyy-MM-dd',_data.pkgEndTime),
        }
      })
    },
    getListData(){
      const { merchantId } = this.flowQueryData
      let _fun = this.active == 'flowDetail' ? myPackageFlowList : merchantFlowRecordList
      let obj = {
        pageNum: this.pageObj.pageNum,
        pageSize: this.pageObj.pageSize,
        merchantId,
        consumeType: this.filterObj.value,
        businessType: this.filterObj.value,
      }
      console.log('getListData query',obj)
      
      this.loading= true
      _fun(obj).then(res => {
        let { list, total } = res.data.data
        console.log('getListData res',list)
        if(list && list.length){
          let arr = list.map(item => {
            if(this.active == 'flowDetail'){
              // 流量详单
              return { 
                ...item,
                name: item.consumeTypeZh,
                date: item.statisticalTime,
                consumeFlow: item.allConsume,
                show: !!item.statisticalTime
              }
            }else{
              return { 
                ...item,
                name: item.businessTypeZh,
                date: dateFtt('yyyy-MM-dd hh:mm:ss', item.updateTime),
                consumeFlow: `${item.symbolFlowBalance}${item.flowBalance}`,
                show: !!item.updateTime
              }
            }
          })
          // 测试环境诡异bug 流量余额记录出现偶发性展示undefined 暂未排查到问题，解决方案为 根据是否有时间控制数据是否展示
          arr = arr.filter( v => v.show)
          console.log('arr',arr)
          this.dataList.push(...arr)
          this.pageObj.pageNum += 1
        }
        if(this.dataList.length == total){
          this.finished = true
        }
        this.loading= false
      })
    },
    toUpgrade(disabled){
      if(disabled) return
	  // 三期弃用⬇⬇⬇
      // const { merchantId } = this.flowQueryData
      // checkMercUpgradeFlowPkg({
      //   merchantId,
      //   accountFlowBalance: this.baseFlowInfo.accountFlowBalance
      // }).then(res => {
      //   console.log('then',res)
      //   const { code, data, msg } = res.data
      //   if(code == 0 && data){
      //     this.$router.push({
      //       path:'/upgrade',
      //       query:{
      //         ...data,
      //         pkgEndTime: this.baseFlowInfo.pkgEndTime
      //       }
      //     })
      //   }else{
      //     this.$toast(msg)
      //   }
      // })
	  // 三期弃用⬆⬆⬆
	  this.$router.push({
	        path:'/upgrade'
	      })
    },
    toRecharge(){
      this.$router.push('recharge')
    },
    handleMenu(item){
      console.log('item++++++++++',item)
	  if(item.consumeTypeZh === '游客消耗' || item.consumeTypeZh === '月结清空'){
		 
	  }else{
		this.$router.push({
		  path:this.active,
		  query: JSON.parse(JSON.stringify(item))
		})  
	  }
     
    }
  }
}
</script>

<style lang="less" scoped>
.myFlow{
  font-size: 26px;
  height: 100%;
  background: #F9F9F9;
  display: flex;
  flex-direction: column;
  .flexItem{
    display: flex;
    justify-content: space-between;
  }
  .card{
    margin: 32px 32px 0 32px;
    padding: 32px;
    // height: 158px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.1);
    border-radius: 15px;
    // display: flex;
    // justify-content: space-between;
    .tcBottom{
      margin-top: 61px;
      .progress{
        margin: 10px 0;
      }
      .useLabel{
        color: #131313;
        opacity: 0.6;
      }
    }
    .cardLabel{
      font-size: 32px;
      color: #131313;
      .tip{
        color: #F05357;
        font-size: 28px;
      }
    }
    .cardBtn{
      width: 160px;
      height: 54px;
      background: #FFB72F;
      border-radius: 27px;
      color: #FFFFFF;
      text-align: center;
      line-height: 54px;
      &.disabled{
        opacity: 0.5;
      }
    }
  }
  .nowMeal{
    margin-bottom: 30px;
  }
  .listQuery{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding-right: 30px;
    .van-tabs{
      width: 60%;
    }
    .query{
      color: #FFB72F;
      img{
        width: 30px;
      }
    }
  }
  .dataList{
    background: #fff;
    flex: 1;
    overflow: auto;
    .dataItem{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px;
      border-bottom: 1px solid #E7E7E7;
      .left{
        .title{
          color: #131313;
          margin-bottom: 30px;
        }
        .date{
          color: #3D3D3D;
          opacity: 0.8;
        }
      }
    }
  }
}
</style>